<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full">
    <!-- 顶部 Banner -->
    <section class="w-full pb-[32%] lg:pb-[21%] relative">
      <img
        src="../assets/images/contact-banner.png"
        alt=""
        class="w-full h-full object-cover absolute top-0 left-0"
      />
      <!-- <div class="w-full h-full absolute top-0 left-0">
        <div class="w-full h-full max-w-300 mx-auto flex flex-col justify-center pb-20">
          <h1 class="text-[60px] leading-[50px] font-bold gradient-text">CONTACT US</h1>
          <h2 class="text-[40px] leading-[40px] font-bold">聯繫我們</h2>
        </div>
      </div> -->
    </section>
    <section class="lg:flex">
      <div class="w-full lg:w-2/5 pl-3 lg:pl-2/17 flex flex-col justify-center">
        <div class="font-bold">
          <p class="pt-3 text-5xl flex flex-col text-[#EFF2F7] font-MiSans-Heavy font-800">
            <span class="font-MiSans-Heavy"> COMPANY </span>
          </p>
          <p class="font-MiSans-Medium transform -translate-y-5 mb-[-28px] text-[32px]">企業信息</p>
        </div>
        <ul class="mt-5 md:mt-10 lg:mt-15">
          <li class="pr-3 lg:pr-10">
            <div
              class="py-3 md:py-7 lg:py-10 flex gap-5 lg:gap-10 border-b-solid border-b-[#eee] border-b-[1px]"
            >
              <img src="../assets/images/contact-address.png" alt="" class="size-15 lg:size-20" />
              <p class="flex flex-col justify-center">
                <span class="text-lg text-[#7B7D85] leading-loose">地址</span>
                <span class="text-sm lg:text-xl text-[#262223] leading-loose">
                  {{ webConfig?.company_address }}
                </span>
              </p>
            </div>
          </li>
          <li class="pr-3 lg:pr-10">
            <div
              class="py-3 md:py-7 lg:py-10 flex gap-5 lg:gap-10 border-b-solid border-b-[#eee] border-b-[1px]"
            >
              <img src="../assets/images/contact-phone.png" alt="" class="size-15 lg:size-20" />
              <p class="flex flex-col justify-center">
                <span class="text-lg text-[#7B7D85] leading-loose">電話</span>
                <span class="text-sm lg:text-xl text-[#262223] leading-loose">
                  {{ webConfig?.company_mobile }}
                </span>
              </p>
            </div>
          </li>
          <li class="pr-3 lg:pr-10">
            <div
              class="py-3 md:py-7 lg:py-10 flex gap-5 lg:gap-10 border-b-solid border-b-[#eee] border-b-[1px]"
            >
              <img src="../assets/images/contact-fax.png" alt="" class="size-15 lg:size-20" />
              <p class="flex flex-col justify-center">
                <span class="text-lg text-[#7B7D85] leading-loose">傳真</span>
                <span class="text-sm lg:text-xl text-[#262223] leading-loose">
                  {{ webConfig?.company_fax }}
                </span>
              </p>
            </div>
          </li>
          <li class="pr-3 lg:pr-10">
            <div
              class="py-3 md:py-7 lg:py-10 flex gap-5 lg:gap-10 border-b-solid border-b-[#eee] border-b-[1px]"
            >
              <img src="../assets/images/contact-whatsapp.png" alt="" class="size-15 lg:size-20" />
              <p class="flex flex-col justify-center">
                <span class="text-lg text-[#7B7D85] leading-loose">Whatsapps</span>
                <span class="text-sm lg:text-xl text-[#262223] leading-loose">
                  {{ webConfig?.company_whatsapps }}
                </span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <div class="w-full lg:w-3/5 pb-1/1 lg:pb-14/25 bg-[#F5F5F5] relative" ref="iframe">
        <iframe class="absolute top-0 left-0 w-full h-full" :src="mapUrl" frameborder="0"></iframe>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useConfigStore } from '@/stores'

const iframe = ref<HTMLIFrameElement>()
const mapUrl = ref('')
const webConfig = computed(() => useConfigStore().webConfig)

onMounted(() => {
  mapUrl.value = `//www.weebly.com/weebly/apps/generateMap.php?map=google&elementid=121879859584463322&ineditor=0&control=3&width=auto&height=${iframe.value?.getBoundingClientRect().height}&overviewmap=0&scalecontrol=0&typecontrol=0&zoom=15&long=114.1461055&lat=22.3373679&domain=www&point=1&align=1&reseller=true`
})
</script>

<style scoped>
:deep(#map) {
  height: 100% !important;
}
</style>
